<!-- 这是子组件 -->
<template>
    <div class="timeChoice">
        <div class="timeChoice_title">
            {{ title }}
        </div>
        <div class="timeChoice_date" @click="isShow = true">
            {{ value[0] }}
            <img src="@/assets/operation/icon_lansexiasanjiao.png" alt="">
            <span class="timeChoice_date_division">至</span>
            {{ value[1] }}
            <img src="@/assets/operation/icon_lansexiasanjiao.png" alt="">
        </div>
        <van-calendar v-model:show="isShow" type="range" @confirm="onConfirm" :allow-same-day="true" :min-date="minDate"
            :max-date="maxDate" />
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
defineProps(['title', 'value'])
const emit = defineEmits(['update:value', 'confirm'])
const isShow = ref(false)
// 自定义日期范围
const minDate = new Date('2010/01/01')
const maxDate = new Date('2050/12/31')
/** 日期选择 */
const onConfirm = (values: any) => {
    const [start, end] = values;
    isShow.value = false
    const arr = [formatDate(start), formatDate(end)]
    emit('update:value', arr)
    emit('confirm', arr, values)
}
// 处理日期格式
const formatDate = (date: any) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
</script>

<style lang="less" scoped>
.timeChoice {
    width: 100%;
    background: #fff;
    padding: 15px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .timeChoice_title {
        font-weight: 500;
        font-size: 16px;
        color: #1A1B1C;
    }

    .timeChoice_date {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 14px;
        color: #0094FF;

        .timeChoice_date_division {
            margin-right: 10px;
        }

        img {
            width: 10px;
            height: 5px;
            margin: 0 10px;
        }
    }
}
</style>